<template>
  <div class="page_message" id="message_list">
    <div class="warp">
      <div class="container">
        <div class="row">
          <div class="col-12">
            <div class="card_message">
              <div class="message_list">
                <h4>留言列表</h4>
                <list_message :list="list"></list_message>
              </div>
            </div>
          </div>
        </div>
        
        <div class="row">
          <div class="col overflow-auto flex_cc">
            <b-pagination-nav
              :base-url="$route.path"
              :number-of-pages="count_pages"
              :link-gen="link_gen"
              @change="change_page"
              first-number
              last-number
            ></b-pagination-nav>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import mixin from "../../mixins/page.js";
import list_message from "../../components/diy/list_message.vue";

export default {
  mixins: [mixin],
  components: {
    list_message,
  },
  data() {
    return {
      list: [],
      url_get_list: "~/api/message/get_list",
      query: {
        page: 1,
        size: 7,
        orderby: "create_time asc",
      },
      // 页面数
      count_pages: 1,
    };
  },
  methods: {
    get_list_after(json) {
      this.count_pages = Math.ceil(json.result.count / this.query.size);
    },
    link_gen(page_num) {
      return {
        query: {
          page: page_num,
        },
      };
    },
    change_page(page_num) {
      this.query.page = page_num;
      this.get_list();
    },
  },
};
</script>

<style>
.flex_cc{
  display: flex;
  justify-content: center;
  align-items: center;
}
.list_message {
  background-color: #f8f8f8;
  min-height: 100vh;
}

.item_message {
  background-color: #ffffff;
  margin-bottom: 1rem;
}
.user_info {
  text-align: center;
  padding: 0.5rem 0;
  border-bottom: 1px solid #eee;
}
.time {
  font-size: 0.7rem;
  margin-top: 0.5rem;
}
.content {
  width: 100%;
  padding: 0.8rem;
}

.content rich-text {
  width: 100%;
  word-break: break-all;
}
</style>
